<template>
    <div class="videoCon">
        <div class="videoCon_video" >
            <video
            @durationchange="ondurationchangefn"
            @timeupdate="onHandleupdatats" ref="videoRef" :src="url"
            @canplaythrough="onprogressfns"
            @canplay="canplay"
            @playing="playing"
            @waiting="waiting"
            
            >
            </video>
            <div class="loadings"  v-if="loaders && isplay" >
                      <div></div>
            </div>
            <div @click="changeplay" :class="!isplay?'isplays active':'isplays'">
                 <!-- 暂停 -->
                 <svg  t="1681283460703" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1574" width="200" height="200"><path d="M507.469576 183.699394c-188.509091 0-341.333333 152.824242-341.333334 341.333333s152.824242 341.333333 341.333334 341.333334 341.333333-152.824242 341.333333-341.333334-152.824242-341.333333-341.333333-341.333333z m-403.39394 341.333333c0-222.797576 180.596364-403.393939 403.39394-403.393939s403.393939 180.596364 403.393939 403.393939-180.596364 403.393939-403.393939 403.39394-403.393939-180.596364-403.39394-403.39394z"  p-id="1575"></path><path d="M430.762667 373.542788a31.030303 31.030303 0 0 1 31.868121 1.551515l186.181818 124.121212a31.030303 31.030303 0 0 1 0 51.634424l-186.181818 124.121213a31.030303 31.030303 0 0 1-48.252121-25.817213v-248.242424a31.030303 31.030303 0 0 1 16.384-27.368727z m45.676606 85.333333v132.313212l99.203879-66.156606-99.203879-66.125575z"  p-id="1576"></path></svg> 
                 <!-- loading -->
               
            </div>
            <!-- 加载重新播放 --> 
        </div>
        <div class="videoCon_banner">
            <div class="progress">
                <div class="line" ref="lineRef" 
                    @mousemove="onMovehuaVideos"
                    @click="videoclickfns">
                    <div class="group" ref="groupRef"></div>
                    <div @mousemove="onMovefns" @mousedown="onMouseDown" @mouseup="onMouseup" class="bars" ref="barsRef"
                     data-set="bar"></div>
                     <div class="soruce" ref="huaVideos">
                        <video 
                          ref="videoRef2" :src="url">
                        </video>
                     </div>
                </div>
            </div>    
            <!-- 视频时间 -->
            <div class="banners">
                <div>
                    <!-- 视频开关 -->
                    <div class="opens" @click="changeplay">
                        <svg v-if="!isplay" t="1681283460703" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1574" width="200" height="200"><path d="M507.469576 183.699394c-188.509091 0-341.333333 152.824242-341.333334 341.333333s152.824242 341.333333 341.333334 341.333334 341.333333-152.824242 341.333333-341.333334-152.824242-341.333333-341.333333-341.333333z m-403.39394 341.333333c0-222.797576 180.596364-403.393939 403.39394-403.393939s403.393939 180.596364 403.393939 403.393939-180.596364 403.393939-403.393939 403.39394-403.393939-180.596364-403.39394-403.39394z"  p-id="1575"></path><path d="M430.762667 373.542788a31.030303 31.030303 0 0 1 31.868121 1.551515l186.181818 124.121212a31.030303 31.030303 0 0 1 0 51.634424l-186.181818 124.121213a31.030303 31.030303 0 0 1-48.252121-25.817213v-248.242424a31.030303 31.030303 0 0 1 16.384-27.368727z m45.676606 85.333333v132.313212l99.203879-66.156606-99.203879-66.125575z"  p-id="1576"></path></svg>
                        <svg v-else t="1681283444669" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1417" width="200" height="200"><path d="M507.469576 183.699394c-188.509091 0-341.333333 152.824242-341.333334 341.333333s152.824242 341.333333 341.333334 341.333334 341.333333-152.824242 341.333333-341.333334-152.824242-341.333333-341.333333-341.333333z m-403.39394 341.333333c0-222.797576 180.596364-403.393939 403.39394-403.393939s403.393939 180.596364 403.393939 403.393939-180.596364 403.393939-403.393939 403.39394-403.393939-180.596364-403.39394-403.39394z"  p-id="1418"></path><path d="M414.378667 369.881212a31.030303 31.030303 0 0 1 31.030303 31.030303v248.242424a31.030303 31.030303 0 1 1-62.060606 0v-248.242424a31.030303 31.030303 0 0 1 31.030303-31.030303zM600.560485 369.881212a31.030303 31.030303 0 0 1 31.030303 31.030303v248.242424a31.030303 31.030303 0 1 1-62.060606 0v-248.242424a31.030303 31.030303 0 0 1 31.030303-31.030303z"  p-id="1419"></path></svg>
                       
                      </div>
                    <!-- 视频进度条 -->
                      <!--  -->
                    <!-- 视频时间 -->
                    <div class="times">
                        {{nowtime}}/{{alltime}}
                    </div>
                </div>
                <div @click="bannerClick">
                    <!-- 播放方式 -->
                    <div class="showtype" data-set="isplay">
                        <EShowtype @handletype="handletypefn"></EShowtype>
                        <svg t="1681192234599" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="5637" width="200" height="200">
                            <path
                                d="M512 328c-100.8 0-184 83.2-184 184S411.2 696 512 696 696 612.8 696 512 612.8 328 512 328z m0 320c-75.2 0-136-60.8-136-136s60.8-136 136-136 136 60.8 136 136-60.8 136-136 136z"
                                p-id="5638"></path>
                            <path
                                d="M857.6 572.8c-20.8-12.8-33.6-35.2-33.6-60.8s12.8-46.4 33.6-60.8c14.4-9.6 20.8-27.2 16-44.8-8-27.2-19.2-52.8-32-76.8-8-14.4-25.6-24-43.2-19.2-24 4.8-48-1.6-65.6-19.2-17.6-17.6-24-41.6-19.2-65.6 3.2-16-4.8-33.6-19.2-43.2-24-14.4-51.2-24-76.8-32-16-4.8-35.2 1.6-44.8 16-12.8 20.8-35.2 33.6-60.8 33.6s-46.4-12.8-60.8-33.6c-9.6-14.4-27.2-20.8-44.8-16-27.2 8-52.8 19.2-76.8 32-14.4 8-24 25.6-19.2 43.2 4.8 24-1.6 49.6-19.2 65.6-17.6 17.6-41.6 24-65.6 19.2-16-3.2-33.6 4.8-43.2 19.2-14.4 24-24 51.2-32 76.8-4.8 16 1.6 35.2 16 44.8 20.8 12.8 33.6 35.2 33.6 60.8s-12.8 46.4-33.6 60.8c-14.4 9.6-20.8 27.2-16 44.8 8 27.2 19.2 52.8 32 76.8 8 14.4 25.6 22.4 43.2 19.2 24-4.8 49.6 1.6 65.6 19.2 17.6 17.6 24 41.6 19.2 65.6-3.2 16 4.8 33.6 19.2 43.2 24 14.4 51.2 24 76.8 32 16 4.8 35.2-1.6 44.8-16 12.8-20.8 35.2-33.6 60.8-33.6s46.4 12.8 60.8 33.6c8 11.2 20.8 17.6 33.6 17.6 3.2 0 8 0 11.2-1.6 27.2-8 52.8-19.2 76.8-32 14.4-8 24-25.6 19.2-43.2-4.8-24 1.6-49.6 19.2-65.6 17.6-17.6 41.6-24 65.6-19.2 16 3.2 33.6-4.8 43.2-19.2 14.4-24 24-51.2 32-76.8 4.8-17.6-1.6-35.2-16-44.8z m-56 92.8c-38.4-6.4-76.8 6.4-104 33.6-27.2 27.2-40 65.6-33.6 104-17.6 9.6-36.8 17.6-56 24-22.4-30.4-57.6-49.6-97.6-49.6-38.4 0-73.6 17.6-97.6 49.6-19.2-6.4-38.4-14.4-56-24 6.4-38.4-6.4-76.8-33.6-104-27.2-27.2-65.6-40-104-33.6-9.6-17.6-17.6-36.8-24-56 30.4-22.4 49.6-57.6 49.6-97.6 0-38.4-17.6-73.6-49.6-97.6 6.4-19.2 14.4-38.4 24-56 38.4 6.4 76.8-6.4 104-33.6 27.2-27.2 40-65.6 33.6-104 17.6-9.6 36.8-17.6 56-24 22.4 30.4 57.6 49.6 97.6 49.6 38.4 0 73.6-17.6 97.6-49.6 19.2 6.4 38.4 14.4 56 24-6.4 38.4 6.4 76.8 33.6 104 27.2 27.2 65.6 40 104 33.6 9.6 17.6 17.6 36.8 24 56-30.4 22.4-49.6 57.6-49.6 97.6 0 38.4 17.6 73.6 49.6 97.6-6.4 19.2-14.4 38.4-24 56z"
                                p-id="5639"></path>
                        </svg></div>
                    <!-- 快进 -->
                    <div class="fastforward" data-set="FastForWard">
                        <EFastward @valueNums="EFastwardfn"></EFastward>
                        <svg t="1681192210317" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4601" width="200" height="200">
                            <path
                                d="M512 951.04a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z m0-819.2a384 384 0 1 0 384 384A384 384 0 0 0 512 132.096z"
                                p-id="4602"></path>
                            <path
                                d="M468.992 493.824l-130.048-75.008a20.992 20.992 0 0 0-31.232 18.176v150.016a20.992 20.992 0 0 0 31.232 18.176l130.048-75.008a20.992 20.992 0 0 0 0-36.352zM684.8 493.824l-129.536-75.008a21.248 21.248 0 0 0-31.744 18.432v149.504a21.248 21.248 0 0 0 31.744 18.432l129.536-75.008a20.992 20.992 0 0 0 0-36.352z"
                                p-id="4603"></path>
                        </svg>
                    </div>
                    <!-- 音量 -->
                    <div class="volume" data-set="volume">
                        <EVolumn @valueNums="valueNumsfn"></EVolumn>
                        <svg   t="1681192106212" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2636" width="200" height="200">
                            <path
                                d="M537.6 145.066667L554.666667 128v768l-42.666667-42.666667-311.466667-311.466666L170.666667 512l29.866666-29.866667 337.066667-337.066666z m-25.6 85.333333L230.4 512l281.6 281.6V230.4z m128-12.8c145.066667 21.333333 256 145.066667 256 294.4s-110.933333 273.066667-256 294.4v-42.666667c119.466667-21.333333 213.333333-123.733333 213.333333-251.733333s-93.866667-230.4-213.333333-251.733333v-42.666667z m0 128c72.533333 17.066667 128 85.333333 128 166.4s-55.466667 145.066667-128 166.4v-42.666667c51.2-17.066667 85.333333-64 85.333333-119.466666s-34.133333-102.4-85.333333-119.466667V345.6z"
                                p-id="2637" data-spm-anchor-id="a313x.7781069.0.i0"></path>
                        </svg>
                    </div>
                    <!-- 放大 -->
                    <div class="scalemax" data-set="scalemax">
                        <svg v-if="isfull" t="1681283569590" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1731" width="200" height="200"><path d="M631.590788 214.729697a31.030303 31.030303 0 0 1 31.030303-31.030303h155.151515a31.030303 31.030303 0 0 1 31.030303 31.030303v155.151515a31.030303 31.030303 0 1 1-62.060606 0v-124.121212h-124.121212a31.030303 31.030303 0 0 1-31.030303-31.030303zM197.166545 649.153939a31.030303 31.030303 0 0 1 31.030303 31.030303v124.121213h124.121213a31.030303 31.030303 0 0 1 0 62.060606h-155.151516a31.030303 31.030303 0 0 1-31.030303-31.030303v-155.151516a31.030303 31.030303 0 0 1 31.030303-31.030303zM817.772606 649.153939a31.030303 31.030303 0 0 1 31.030303 31.030303v155.151516a31.030303 31.030303 0 0 1-31.030303 31.030303h-155.151515a31.030303 31.030303 0 1 1 0-62.060606h124.121212v-124.121213a31.030303 31.030303 0 0 1 31.030303-31.030303zM166.136242 214.729697a31.030303 31.030303 0 0 1 31.030303-31.030303h155.151516a31.030303 31.030303 0 1 1 0 62.060606h-124.121213v124.121212a31.030303 31.030303 0 1 1-62.060606 0v-155.151515z"  p-id="1732"></path></svg>
                        <svg v-else t="1681283594517" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1887" width="200" height="200"><path d="M631.590788 183.699394a31.030303 31.030303 0 0 1 31.030303 31.030303v155.151515h155.151515a31.030303 31.030303 0 0 1 0 62.060606h-186.181818a31.030303 31.030303 0 0 1-31.030303-31.030303v-186.181818a31.030303 31.030303 0 0 1 31.030303-31.030303zM166.136242 649.153939a31.030303 31.030303 0 0 1 31.030303-31.030303h186.181819a31.030303 31.030303 0 0 1 31.030303 31.030303v186.181819a31.030303 31.030303 0 1 1-62.060606 0v-155.151516h-155.151516a31.030303 31.030303 0 0 1-31.030303-31.030303zM600.560485 649.153939a31.030303 31.030303 0 0 1 31.030303-31.030303h186.181818a31.030303 31.030303 0 0 1 0 62.060606h-155.151515v155.151516a31.030303 31.030303 0 1 1-62.060606 0v-186.181819zM383.348364 183.699394a31.030303 31.030303 0 0 1 31.030303 31.030303v186.181818a31.030303 31.030303 0 0 1-31.030303 31.030303h-186.181819a31.030303 31.030303 0 1 1 0-62.060606h155.151516v-155.151515a31.030303 31.030303 0 0 1 31.030303-31.030303z"   p-id="1888"></path></svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup> 
 

import { defineAsyncComponent, reactive, ref, watch } from 'vue';
const props = defineProps(['url']); 
const EVolumn = defineAsyncComponent(()=>import('./components/volumns.vue'));
const EFastward = defineAsyncComponent(()=>import('./components/FastForWard.vue'));
const EShowtype = defineAsyncComponent(()=>import('./components/showtype.vue'));
const lineRef = ref<HTMLElement>(null);
const barsRef = ref<HTMLElement>(null);
const groupRef = ref<HTMLElement>(null);
const videoRef = ref<HTMLMediaElement>(null);
const iskey = ref(false);
const isplay= ref(false);
const isfull= ref(false);
const volumns = ref(0.5);
const alltime = ref('00:00');
const nowtime = ref('00:01');
const loaders = ref(true);
const videoRef2 = ref<any>();
const newurls = ref('');

const posi = reactive({
    x: 0,
    y: 0
}) 

const onprogressfns = (e)=>{
    loaders.value=false;
}

const playing = ()=>{
     console.log('playing')
}
const waiting = ()=>{
      loaders.value=true;
}
const canplay = ()=>{
      loaders.value=false;
}


// 获取xhr func   





  

const getVedioXhr = ()=>{
 
            const req = new XMLHttpRequest();
            req.open("GET", url, true);
            req.responseType = "blob";
            req.onload = function () {
              // Onload is triggered even on 404
              // so we need to check the status code
              if (this.status === 200) {
                const videoBlob = this.response;
                const blobSrc = URL.createObjectURL(videoBlob); // IE10+
                console.log(blobSrc);
                newurls.value=blobSrc;
                // Video is now downloaded
                // and we can set it as source on the video element
                // blobSrc 便是虚拟的本地地址
              }
            };
            req.onerror = function () {
              // Error
            };
            req.send();
}
// getVedioXhr();



// 缩略图
const huaVideos = ref<HTMLVideoElement>();
const onMovehuaVideos = (e)=>{
     let lines = lineRef.value.getBoundingClientRect(); 
     let rects = huaVideos.value?.getBoundingClientRect() as any;
     let x = e.offsetX;
     if((x-(rects?.width/2))<0){
        x = ((rects?.width/2))
     }
     if(lines.width < x+(rects?.width/2)){
        x = lines.width-((rects?.width/2))  
     }
     Object.assign(huaVideos.value?.style ?? {},{
        transform: `translateX(${x-(rects?.width/4)+5}px)`
     }) 
     videoRef2.value.currentTime = Number((e.offsetX/lines.width).toFixed(2))* videoRef2.value.duration

}

const ondurationchangefn = (e)=>{
    alltime.value =  filterTimes(Math.floor(videoRef.value.duration));
    loaders.value = true;
} 
// 时间格式化
const filterTimes = (e)=>{
     let str = ''
     let h = 0;
     let m = 0;
     let s = 0;
      if(e<60){
        //   分钟
        s = e%60;
        s = s<10?`0${s}`:s
      }else if(e<60*60 && e>=60){
        m = Math.floor(e/60);
        m = m<10?`0${m}`:m
         s = e%60;
         s = s<10?`0${s}`:s
      }else if(e>60*60){
         h = Math.floor(e/(60*60))
         h = h<10?`0${h}`:h
         m = Math.floor((e%(60*60))/60);
         m = m<10?`0${m}`:m
         s = Math.floor((e%(60*60))%60);
         s = s<10?`0${s}`:s
      } 
   
      str = `${m?m:'00'}:${s?s:'00'}`
      return str;
}

 
// 播放时间发生改变
const onHandleupdatats = (e)=>{
    nowtime.value =  filterTimes(Math.floor(videoRef.value.currentTime));
    
    if(!iskey.value){
        let rect = lineRef.value.getBoundingClientRect();
        let baifenbi = Number((videoRef.value.currentTime/videoRef.value.duration).toFixed(2))
        
        updatastyle(Math.floor(baifenbi*rect.width));
    }
   
}

// 播放、关闭
const changeplay = ()=>{
     isplay.value=!isplay.value;
     if(isplay.value){
        videoRef.value.play()
     }else{
        videoRef.value.pause()
     }
}
// 设置
const handletypefn = (e:{type:String,statu:Boolean})=>{
      console.log(e);
}

// 播放速度
const EFastwardfn = (e)=>{
       
}
// 音量
const valueNumsfn = (e)=>{ 
    volumns.value=e;
       videoRef.value.volume = e;
} 
//  底部的banner使用时间冒泡
const bannerClick = (e)=>{
      let parens = e.target; 
      if(!parens){
         return false;
      }
      while(parens){
          if(parens.getAttribute('data-set')){
              break;
          }else{
             parens = parens.parentNode;
             
          }
      }
      console.log(parens);
}

// 滚动条点击
const videoclickfns = (e) => {
    e.preventDefault();
    if (e.target != barsRef.value) { 
        let rect = lineRef.value.getBoundingClientRect();
        updataProgress(e.offsetX, rect);
    } 
}
// 取消默认事件
const onMovefns = (e) => {
   
    e.preventDefault();
    e.stopPropagation();
}
const onMouseDown = (e) => {
    // 只要在播放期间 移动滑块就立即关闭
    if(isplay.value){
        changeplay()
    }
   
    e.stopPropagation();
    iskey.value = true;
    posi.x = e.pageX;
    posi.y = e.pageY;
}
const onMouseup = (e) => {
    e.stopPropagation();
    iskey.value = false;

}
watch(() => iskey.value, () => {
    if (iskey.value) {
        document.addEventListener('mousemove', handleclicks)
        document.addEventListener('mouseup', onMouseup)
    } else {
        document.removeEventListener('mousemove', handleclicks)
        document.removeEventListener('mouseup', onMouseup)
    }
})

watch(()=>nowtime.value,()=>{
       if(nowtime.value==alltime.value){
         isplay.value=false;
       }
})


const handleclicks = (e) => {
    let abs = barsRef.value.offsetLeft;
 
    let rect = lineRef.value.getBoundingClientRect();
    let rect2 = barsRef.value.getBoundingClientRect();
    let x = e.pageX - posi.x;
    let gl = (abs + x)
    if (gl < 0 || gl > (rect.width - (rect2.width))) {
        return false;
    }
    updataProgress(gl, rect);
    posi.x = e.pageX;
    posi.y = e.pageY;
    // 比例计算为了与视频进度联动 
}
// 更新滚动条
const updataProgress = (gl, rect) => {
  
    updatastyle(gl)
    videoRef.value.currentTime = videoRef.value.duration * Number((gl / rect.width).toFixed(4));
   
}
// 修改滚动条样式
const updatastyle = (gl)=>{
      
    Object.assign(barsRef.value.style ?? {}, {
        left: gl + 'px'
    })

    Object.assign(groupRef.value.style ?? {}, {
        width: gl + 'px'
    })
}







</script>
<style lang="less">
@import url('./style.less');
.loadings{
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
     background-color: rgba(22, 20, 20, 0.568);
     display: flex;
     align-items: center;
     justify-content: center;
     &>div{
         width: 80px;
         height: 80px;
         border-radius: 50%;
         border: 3px solid #e0dfdf;
         border-top-color: transparent;
         border-bottom-color: transparent;
         animation: rotates 1s   linear  infinite; 
         transform: rotate(0deg);
     }

}
@keyframes  rotates{
     from{
        transform: rotate(0deg);
     }to{
        transform: rotate(360deg);
     }
}

</style>
